<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
	<style>
			/* Bad and ugly reset */
			*{ margin: 0; padding: 0; border: 0; }
		
		
			.box {
				width: 100%; 
				height: 100%;
				line-height: 5;
				text-align: center;
				font-size: 5em;
				color: #fff;
				text-transform: capitalize;
				vertical-align:middle; 
			}
			
			.slider ul {
				list-style:none
			}
			
			.slider-nav__item {
				background:url('${pageContext.request.contextPath}/assets/images/yuan2.png') no-repeat;
			}
			
			.slider-nav__item--current {
				background:url('${pageContext.request.contextPath}/assets/images/yuan1.png') no-repeat;
			}
	</style>
	<script type="text/javascript" src="${pageContext.request.contextPath}/assets/sea.js"></script>	
	<script type="text/javascript">	
		seajs.config({
			base: '${pageContext.request.contextPath}/assets/',
			alias:{
				'jquery':'js/jquery/jquery-1.9.1.min.js',					
				'glide':'js/jquery.plugins/jquery.glide.js'
			}	
		});	
		
		
		seajs.use(['jquery','glide'],function($){				
			
			$('.slider').glide({
	
				//autoplay:true,//是否自动播放 默认值 true如果不需要就设置此值
	
				animationTime:500, //动画过度效果，只有当浏览器支持CSS3的时候生效
	
				arrows:true, //是否显示左右导航器
				arrowsWrapperClass: "arrowsWrapper",//滑块箭头导航器外部DIV类名
				arrowMainClass: "slider-arrow",//滑块箭头公共类名
				arrowRightClass:"slider-arrow--right",//滑块右箭头类名
				arrowLeftClass:"slider-arrow--left",//滑块左箭头类名
				arrowRightText:">",//定义左右导航器文字或者符号也可以是类
				arrowLeftText:"<",
	
				nav:true, //主导航器也就是本例中显示的小方块
				navCenter:true, //主导航器位置是否居中
				navClass:"slider-nav",//主导航器外部div类名
				navItemClass:"slider-nav__item", //本例中小方块的样式
				navCurrentItemClass:"slider-nav__item--current" //被选中后的样式
			});
		
		
			
		});

</script>
 <div class="slider">
		<ul class="slides">
			<li class="slide"><div class="box" style="background-color: #1abc9c;">slide1</div></li>
			<li class="slide"><div class="box" style="background-color: #16a085;">slide2</div></li>
			<li class="slide"><div class="box" style="background-color: #f1c40f;">slide3</div></li>
			<li class="slide"><div class="box" style="background-color: #f39c12;">slide4</div></li>
			<li class="slide"><div class="box" style="background-color: #d35400;">slide5</div></li>
			<li class="slide"><div class="box" style="background-color: #c0392b;">slide6</div></li>	
		</ul>
	</div>